{extend name="public/list_page"/}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-col-space5" autocomplete="off">
            <div class="layui-inline layui-show-xs-block">
                <input type="text" name="keyword" id="keyword" placeholder="" class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button type="submit" lay-submit="" lay-filter="search" class="layui-btn layui-btn-normal search-btn"><i class="layui-icon">&#xe615;</i></button>
            </div>
        </form>

        <table class="layui-table" id="userList" lay-filter="list"></table>

    </div>
</div>
{/block}

{block name="custom"}
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addUser"><i class="layui-icon">&#xe654;</i>添加账号</button>
    </div>
</script>

<script type="text/html" id="barHandle">
    <button type="button" class="layui-btn handel-btn layui-btn-primary" lay-event="edit" title="编辑"><i class="fa fa-pencil-square-o"></i></button>
    <!--<button type="button" class="layui-btn handel-btn layui-btn-normal" lay-event="allotRule" title="分配权限"><i class="layui-icon">&#xe683;</i></button>-->
    <button type="button" class="layui-btn handel-btn layui-btn-normal" lay-event="allotRole" title="角色分配"><i class="fa fa-user-o"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-del" lay-event="del" title="删除"><i class="fa fa-trash-o"></i></button>
</script>

<script type="text/html" id="isDel">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="isDel" {{ d.status == 1 ? 'checked' : '' }}>
</script>
{/block}

{block name="js"}
<script>
    layui.use(['table','form'], function() {
        var table = layui.table;
        var form = layui.form;

        var userTableIns = table.render({
            title: '账号信息',
            elem: "#userList",
            method: "post",
            url: "{:url('user/index')}",
            page: true,
            limits: [10, 25, 50, 100, 200, 300, 400, 500, 1000],
            toolbar: "#toolbar",//开启头部工具栏
            defaultToolbar: ['filter', {
                title: '导出全部',
                layEvent: 'exportTable',
                icon: 'layui-icon layui-icon-export'
            },
            // {
            //     title: '导入',
            //     layEvent: 'import',
            //     icon: 'layui-icon layui-icon-upload-drag',
            // }
            ],
            response: {
                statusCode: 'suc'
            },
            cols: [[
                // {type:'checkbox'},
                {field: 'name', title: '姓名', align: 'center'},
                {field: 'username', title: '账号', align: 'center'},
                {field: 'status', title: '状态', align: 'center', templet: "#isDel"},
                // {field:'dept',title:'部门',align:'center'},
                // {field:'position',title:'职位',align:'center'},
                // {field:'email',title:'邮箱',align:'center'},
                // {field:'phone',title:'手机',align:'center'},
                {field: '', title: '操作', align: 'center', toolbar: '#barHandle', width: 300}
            ]],
            done:function (res, curr, count) {
                userCurrPage = curr
                $('.layui-table-cell').css({'height':'auto'})
            }
        });

        //头工具栏事件
        table.on('toolbar(list)',function (obj) {
            if (obj.event == 'addUser') {
                xadmin.open('添加账号','{:url("user/add")}',500,380)
            }else if(obj.event == 'exportTable'){
                //请求导出数据
                ajaxRequest("{:url('user/exportData')}",'', function (res) {
                    let exportData = res.data
                    if (exportData.length <= 0){
                        hintMsg('还没有数据呢，添加一些数据再导出吧')
                        return false
                    }
                    //遮罩层
                    var load = layer.load(1,{
                        shade:[0.2,'#AEAEAE'],
                        content:'导出准备中...',
                        success:function (layero) {
                            layero.find('.layui-layer-content').css({
                                'fontSize':'16px',
                                'paddingTop':'40px',
                                'width': '100px',
                                'textAlign': 'center',
                                'backgroundPositionX': 'center'
                            })
                        }
                    });
                    //第一个参数为表头，表头顺序必须要和返回的数据顺序一致
                    table.exportFile(['姓名','账号','密码','状态'],exportData,'csv','账号信息')
                    //关闭遮罩层
                    layer.close(load)
                })

            }else if (obj.event == 'import') {
                xadmin.open('导入',"{:url('user/import')}",500,250)
            }
        });

        table.on('tool(list)',function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                let id = data.id
                let url = "{:url('user/edit')}?id="+id
                xadmin.open('编辑账号信息',url,500,380)
            }else if(obj.event == 'del'){
                layer.confirm('确认彻底删除该账号？',{title:''},function (index) {
                    ajaxRequest("{:url('user/del')}",{id:data.id},function (res) {
                        let icon = icoErr;
                        if (res.code == 'suc') {
                            icon = icoSuc;
                        }
                        layer.msg(res.msg,{icon:icon,time:msgShowTime},function () {
                            userTableIns.reload('userList',{page:userCurrPage})
                        })
                    })
                    layer.close(index);
                })
            }else if(obj.event == 'allotRule'){
                xadmin.open('分配权限',"{:url('user/allotRule')}?id="+data.id)
            }else if(obj.event == 'allotRole'){
                xadmin.open('分配角色',"{:url('user/allotRole')}?id="+data.id)
            }
        });

        form.on('switch(isDel)',function (obj) {
            let id = obj.value
            let tip = '';
            let type = 1;
            if (obj.elem.checked == true){
                tip = '确定启用该账号？';
            } else {
                tip = '确定停用该账号？';
                type = 2;
            }
            layer.confirm(tip,{title:'',btn:['确定','取消'],cancel:function (index,layero) {
                    userTableIns.reload('userList',{page:userCurrPage});
                }
            },function (index) {
                var load = layer.load(1,{shade:[0.5,'#fff']});
                ajaxRequest("{:url('user/changeStatus')}", {id: id, type: type}, function (res) {
                    if (res.code == 'suc') {
                        sucMsg(res.msg,function () {
                            userTableIns.reload('userList',{page:userCurrPage});
                        })
                    }else {
                        errMsg(res.msg,function () {
                            userTableIns.reload('userList',{page:userCurrPage});
                        })
                    }
                });
                layer.close(load);

            },function () {
                userTableIns.reload('userList',{page:userCurrPage})
            })
        });

        //监听提交
        form.on('submit(search)',function (data) {
            //重载表格
            userTableIns.reload({
                where: {
                    keyword: data.field.keyword
                },
                page: {
                    curr: 1
                }
            });
            return false
        });
    });
</script>
{/block}